<template>
	<view class="banner-image">
		<view class="images">
			<view class="content first-marquee" :style="{'animation-duration': second+'s'}">
				<image mode="heightFix" :style="{'height':imgHeight+'px'}" :src="item" v-for="(item, index) in list" :key="index"></image>
			</view>
			<view class="content second-marquee" :style="{'animation-duration': second+'s'}">
				<image mode="heightFix" :style="{'height':imgHeight+'px'}" :src="item" v-for="(item, index) in list" :key="index"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['http://aiweb.pro.aisisoft.com.cn/storage/img/img1.jpg',
					'http://aiweb.pro.aisisoft.com.cn/storage/img/img2.jpg',
					'http://aiweb.pro.aisisoft.com.cn/storage/img/img3.jpg',
					'http://aiweb.pro.aisisoft.com.cn/storage/img/img4.jpg',
					'http://aiweb.pro.aisisoft.com.cn/storage/img/img5.jpg',
					'http://aiweb.pro.aisisoft.com.cn/storage/img/img6.jpg',
					'http://aiweb.pro.aisisoft.com.cn/storage/img/img7.jpg',
					'http://aiweb.pro.aisisoft.com.cn/storage/img/img8.jpg',
					'http://aiweb.pro.aisisoft.com.cn/storage/img/img9.jpg',
					'http://aiweb.pro.aisisoft.com.cn/storage/img/img10.jpg',
					'http://aiweb.pro.aisisoft.com.cn/storage/img/img11.jpg',
				],
				second: 0,
				imgHeight: 0
			}
		},
		created() {
			this.$nextTick(() => {
				this.getWidth()
				this.getSecond()
			})
		},
		methods: {
			getWidth() {
				uni.createSelectorQuery().in(this).select('.images').boundingClientRect(data => {
					console.log(123123, data);
					this.imgHeight = parseInt(data.width / 3.5)
				}).exec();
			},
			getSecond() {
				uni.createSelectorQuery().in(this).select('.content').boundingClientRect(data => {
					this.second = parseInt(data.width / 90)
				}).exec();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner-image {
		width: 80vw;

		.images {
			display: flex;
			overflow: auto;

			.content {
				display: flex;

				img {}
			}


			.first-marquee {
				animation: first-marquee linear infinite normal;
			}

			@keyframes first-marquee {
				0% {
					transform: translate3d(0, 0, 0);
				}

				/* 向左移动 */
				100% {
					transform: translate3d(-100%, 0, 0);
				}
			}

			.second-marquee {
				/* 因为要在第一个span播完之前就得出现第二个span，所以就延迟12s才播放 */
				animation: second-marquee linear infinite normal;
			}

			@keyframes second-marquee {
				0% {
					transform: translateY(0);
				}

				/* 向左移动 */
				100% {
					// transform: translateY(-100%);
					transform: translate3d(-100%, 0, 0);
				}
			}
		}
	}
</style>